<template>
  <el-dialog :title="title" v-if="visible" :visible.sync="visible"
             class="addendum-dialog"
             v-dialog-drag="{'width':width,'height':height}"
             :close-on-click-modal="false"
             :destroy-on-close="true"
             :fullscreen="width>0?false:true">
    <!--Dialog内容展示区-->
    <template v-if="visible">
      <component v-if="componentType === 'CustomComponent' && bodyComponentIsValid"
                 :is="bodyComponent"
                 :ref="componentRef"
                 :params="params"
                 @submit="handleSubmit"
                 @cancel="handleCancel"/>
      <iframe v-else :src="componentPath" width="100%" height="100%" frameborder="0"/>
    </template>
    <div v-else>
      <h2>请正确维护自定义组件路径【componentPath】参数：</h2>
      <h3>* 参考样例：/views/youshuda/components/CustomDialog/demo.vue</h3>
      <h3>* 维护componentPath：youshuda/components/CustomDialog/demo.vue</h3>
      <h3> {</h3>
      <h3>   componentPath: 'youshuda/components/CustomDialog/demo.vue',</h3>
      <h3> }</h3>
    </div>
    <!--Dialog按钮操作区-->
    <div slot="footer" class="dialog-footer" v-if="!isHideFooter">
        <el-button type="primary" @click="submit">{{submitBtnName}}</el-button>
        <el-button @click="handleCancel">{{cancelBtnName}}</el-button>
    </div>

  </el-dialog>
</template>

<script>
import Vue from "vue"

/**
 * 对话框展示自定义组件
 * 1、自定义组件如存在数据提交操作，需实现submit方法
 *	submit(){
 *     return new Promise((resolve, reject)=> {
 *       //业务处理
 *       // 成功：resolve();
 *       // 失败：reject();
 *     });
 * 	}
 * 2、如需要隐藏对话框按钮在自定义组件中自行创建时
 *	完成操作后关闭对话框：this.$emit("submit")
 *  取消操作并关闭对话框：this.$emit("cancel")
 */
export default {
  name: "CustomDialog",
  data(){
    return {
      //是否显示Dialog
      visible: false,
      //Dialog标题区的内容
      title: '',
      //Dialog宽度 如：800px直接赋值800
      width: '',
      //Dialog高度 如：800px直接赋值800
      height: '',
      //是否隐藏Dialog按钮操作区
      isHideFooter: false,
      /**
       * 展示内容组件路径 维护src为下的组件
       * 参考样例：/views/youshuda/components/CustomDialog/demo.vue
       * 维护componentPath：youshuda/components/CustomDialog/demo.vue
       */
      componentPath: '',
      //展示内容组件参数
      params: {},
      //提交按钮名称
      submitBtnName: '确 定',
      //取消按钮名称
      cancelBtnName: '取 消',
      // 自定义组件对象
      bodyComponent: null,
      // 内容组件是否有效
      bodyComponentIsValid: false,
      // 内容组件类型 默认为vue自定义组件（CustomComponent），也可展示http外网地址（ExtranetPage）
      componentType:'CustomComponent',
      //组件ID
      componentRef: ''
    }
  },
  methods: {
    /** 打开对话框 **/
    open(config){
      /** 加载配置 **/
      this.loadConfig(config)
      //打开Dialog
      this.visible = true
    },
    /** 加载配置 **/
    loadConfig(config){
      if(config == null || config == undefined){
        return;
      }
      //Dialog标题区的内容
      this.title = config.title
      //Dialog宽度
      this.width = config.width
      //Dialog高度
      this.height = config.height
      //是否隐藏Dialog按钮操作区
      this.isHideFooter = config.isHideFooter || false
      //提交按钮名称
      this.submitBtnName=config.submitBtnName || '确 定',
      //取消按钮名称
      this.cancelBtnName=config.cancelBtnName || '取 消',
      //展示内容组件路径
      this.componentPath = config.componentPath
      if(this.isNotEmpty(this.componentPath)){
        this.bodyComponentIsValid=true
        // 内容组件类型 默认为vue自定义组件（CustomComponent），也可展示http外网地址（ExtranetPage）
        if(this.componentPath.startsWith("https://") || this.componentPath.startsWith("http://")){
          this.componentType = 'ExtranetPage'
        }else{
          //组件ID
          this.componentRef = this.generateUuid()
          if(!this.componentPath.startsWith("/")){
            this.componentPath = "/"+this.componentPath
          }
          this.bodyComponent = (resolve,reject) => require([`@/views${this.componentPath}`], resolve, (error) => {
            this.msgError('加载自定义组件异常，请检查组件路径是否正确')
            this.bodyComponentIsValid=false
            reject(error);
          })
        }
      }else{
        this.bodyComponentIsValid=false
        this.bodyComponent = null
      }
      //展示内容组件参数
      this.params = config.params
    },
    /** 确认操作 调用自定义组件中的提交方法**/
    submit(){
      let componentObj = this.$refs[this.componentRef]
      if (componentObj && typeof componentObj['submit'] === 'function') {
        componentObj.submit().then(result=>{
          this.handleSubmit()
        }).catch((error) => {});
      }else{
        this.handleSubmit()
      }
    },
    /**
     * 确认操作
     * 当隐藏对话框按钮在自定义组件中创建按钮，当前接收自定义组件传递出来的提交完成事件，用于关闭对话框
     */
    handleSubmit(){
      this.$emit("submit")
      //关闭Dialog
      this.visible = false
    },
    /** 取消操作 **/
    handleCancel(){
      this.$emit("cancel")
      //关闭Dialog
      this.visible = false
    }
  }
};
</script>

<style lang="scss" scoped>

.el-icon-loading{
  margin-right: 10px;
}

</style>
